//飞机
<template>
  <div class="air"
       @mousedown="mousedown"
       @mouseup="mouseup"
       @mousemove="mousemove">
    <div class="button"
         @click="changeTime">
      {{ time ? $t('changeTime[1]') : $t('changeTime[0]') }}
    </div>
    <div class="plane-center"
         :style="{
        transform: 'rotateX(' + rotateX + 'deg)' + 'rotateY(' + rotateY + 'deg)'
      }">
      <div class="plane">
        <div class="noce">
          <div class="noce-front"></div>
          <div class="noce-tail"></div>
          <div class="noce-top"></div>
          <div class="noce-left"></div>
          <div class="noce-right"></div>
          <div class="noce-bottom"></div>
          <div class="noce-flay">
            <div class="flay-button"></div>
            <div v-for="i in 4"
                 :key="i"
                 class="stack">
              <div class="stack-color"></div>
            </div>
          </div>
        </div>
        <div class="body">
          <div class="front"></div>
          <div class="top">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
          </div>
          <div class="right-border">
            <div class="body-front"></div>
            <div class="body-tail"></div>
          </div>
          <div class="left-border">
            <div class="body-front"></div>
            <div class="body-tail"></div>
          </div>
          <div class="bottom">
            <div class="bottom-front">
              <div class="bottom-left"></div>
              <div class="bottom-center"></div>
              <div class="bottom-right"></div>
            </div>
            <div class="bottom-tail">
              <div class="bottom-left"></div>
              <div class="bottom-center"></div>
              <div class="bottom-right"></div>
            </div>
          </div>
        </div>
        <div class="leg">
          <div v-for="i in 2"
               :key="i"
               class="eachleg">
            <div v-for="j in 6"
                 :key="j"></div>
          </div>
        </div>
        <div :class="'column-' + i"
             v-for="i in 8"
             :key="i"></div>
        <div class="tail"></div>
        <div :class="'wheels-' + i"
             v-for="i in 2"
             :key="i">
          <div class="wheels-face"
               v-for="j in 5"
               :key="j"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rotateX: -30, //x轴旋转
      rotateY: 30, //y轴旋转
      clickFlag: false, //鼠标是否按下
      x: 0, //点击时鼠标x位置
      y: 0, //点击时鼠标y位置
      movex: 0, //记录上次x转动角度
      movey: 0, //记录上次y转动角度
      time: sessionStorage.daynight === 'true' ? true : false //是否为黑夜
    }
  },
  methods: {
    //鼠标按下
    mousedown (e) {
      this.clickFlag = true
      this.x = e.clientX
      this.y = e.clientY
    },
    //鼠标抬起
    mouseup () {
      this.clickFlag = false
      this.movex = this.rotateY * 5
      this.movey = this.rotateX * 5
    },
    //鼠标移动
    mousemove (e) {
      if (this.clickFlag) {
        let y = -this.movey + e.clientY - this.y
        let x = this.movex + e.clientX - this.x
        this.rotateX = -y / 5
        this.rotateY = x / 5
      }
    },
    //更改时间
    changeTime () {
      this.time = !this.time
      sessionStorage.daynight = this.time
      this.$initTheme(sessionStorage.theme, this.time)
    }
  }
}
</script>
<style lang="less" scoped>
@top-color: hsl(0, 0%, calc((90 - (var(--dark) * 30)) * 1%)); //顶部
@slide-color: hsl(0, 0%, calc((85 - (var(--dark) * 30)) * 1%)); //两边
@front-color: hsl(0, 0%, calc((80 - (var(--dark) * 30)) * 1%)); //头部
@bottom-front-color: hsl(
  0,
  0%,
  calc((75 - (var(--dark) * 30)) * 1%)
); //底部前端
@bottom-tail-color: hsl(0, 0%, calc((70 - (var(--dark) * 30)) * 1%)); //底部后端
@tail-color: hsl(0, 0%, calc((65 - (var(--dark) * 30)) * 1%)); //尾部
@bg: hsl(210, 80%, calc((90 - (var(--dark) * 76)) * 1%)); //天色
@metal-one: hsl(0, 0%, calc((60 - (var(--dark) * 20)) * 1%)); //头部四周颜色
@metal-two: hsl(0, 0%, calc((50 - (var(--dark) * 20)) * 1%)); //头部四周颜色
@metal-three: hsl(0, 0%, calc((40 - (var(--dark) * 20)) * 1%)); //头部四周颜色
@accent-two: hsl(10, 80%, calc((55 - (var(--dark) * 20)) * 1%));
@accent-five: hsl(10, 80%, calc((40 - (var(--dark) * 20)) * 1%));
@accent-four: hsl(10, 80%, calc((45 - (var(--dark) * 20)) * 1%));
@accent-three: hsl(10, 80%, calc((50 - (var(--dark) * 20)) * 1%));
@accent-one: hsl(10, 80%, calc((60 - (var(--dark) * 20)) * 1%));
@column: hsl(0, 0%, calc((60 - (var(--dark) * 20)) * 1%));
.air {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: @bg;
  .button {
    cursor: pointer;
    position: absolute;
    padding: 5px 10px;
    background: lightgreen;
    border-radius: 5px;
    right: 5%;
    top: 5%;
  }
  .plane-center,
  .plane-center .plane,
  .plane-center .plane .noce,
  .plane-center .plane .leg,
  .plane-center .plane .leg .eachleg,
  .plane-center .plane .body .bottom {
    transform-style: preserve-3d;
  }
  .plane-center {
    position: absolute;
    height: 100%;
    width: 100%;
    .plane {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      height: 15vmin;
      width: 55vmin;
      .noce {
        position: absolute;
        height: 10vmin;
        width: 10vmin;
        left: 0;
        top: 50%;
        transform: rotateY(90deg) translate3d(0, -50%, -7vmin);
        .noce-front {
          position: absolute;
          width: 100%;
          height: 100%;
          transform: translate3d(0, 0, -2vmin);
          background: @metal-three;
        }
        .noce-tail {
          position: absolute;
          width: 100%;
          height: 100%;
          transform: translate3d(0, 0, 2vmin);
          background: @metal-three;
        }
        .noce-left {
          position: absolute;
          left: 0;
          height: 100%;
          width: 4vmin;
          transform: translateX(-2vmin) rotateY(90deg);
          background: @metal-two;
        }
        .noce-right {
          position: absolute;
          right: 0;
          height: 100%;
          width: 4vmin;
          transform: translateX(2vmin) rotateY(90deg);
          background: @metal-two;
        }
        .noce-top {
          position: absolute;
          top: 0;
          height: 4vmin;
          width: 100%;
          transform: translateY(-2vmin) rotateX(90deg);
          background: @metal-one;
        }
        .noce-bottom {
          position: absolute;
          bottom: 0;
          height: 4vmin;
          width: 100%;
          transform: translateY(2vmin) rotateX(90deg);
          background: @metal-one;
        }
        .noce-flay {
          position: absolute;
          top: 50%;
          left: 50%;
          height: 5vmin;
          width: 5vmin;
          -webkit-animation: fly 1s 0s infinite linear both;
          animation: fly 1s 0s infinite linear both;
          .flay-button {
            height: 100%;
            width: 100%;
            z-index: 1;
            position: absolute;
            border-radius: 50%;
            background: @top-color;
          }
          .stack {
            position: absolute;
            height: 10vmin;
            width: 3vmin;
            background: black;
            top: 50%;
            left: 50%;
            transform-origin: top;
            .stack-color {
              width: 100%;
              height: 10%;
              position: absolute;
              bottom: 10%;
              background: red;
            }
          }
          .stack:nth-child(5) {
            transform: translate3d(-50%, 0, 0) rotate(0deg);
          }
          .stack:nth-child(2) {
            transform: translate3d(-50%, 0, 0) rotate(90deg);
          }
          .stack:nth-child(3) {
            transform: translate3d(-50%, 0, 0) rotate(180deg);
          }
          .stack:nth-child(4) {
            transform: translate3d(-50%, 0, 0) rotate(270deg);
          }
        }
      }
      .leg {
        position: absolute;
        top: 50%;
        left: 0;
        height: 80vmin;
        width: 25vmin;
        transform: translateY(-50%) rotate3d(1, 0, 0, 90deg);
        .eachleg {
          position: absolute;
          height: 100%;
          width: 100%;
          div {
            position: absolute;
          }
          div:nth-child(1) {
            height: 100%;
            width: 100%;
            background: @accent-five;
            transform: translate3d(0, 0, -0.5vmin);
          }
          div:nth-child(2) {
            height: 100%;
            width: 100%;
            background: @accent-two;
            transform: translate3d(0, 0, 0.5vmin);
          }
          div:nth-child(3) {
            top: 0;
            height: 1vmin;
            width: 100%;
            background: @accent-one;
            transform: translate3d(0, -0.5vmin, 0) rotateX(90deg);
          }
          div:nth-child(4) {
            bottom: 0;
            height: 1vmin;
            width: 100%;
            background: @accent-three;
            transform: translate3d(0, 0.5vmin, 0) rotateX(90deg);
          }
          div:nth-child(5) {
            left: 0;
            height: 100%;
            width: 1vmin;
            background: @accent-four;
            transform: translate3d(-0.5vmin, 0, 0) rotateY(90deg);
          }
          div:nth-child(6) {
            right: 0;
            height: 100%;
            width: 1vmin;
            background: @accent-three;
            transform: translate3d(0.5vmin, 0, 0) rotateY(90deg);
          }
        }
        .eachleg:nth-child(1) {
          transform: translate3d(0, 0, -7.5vmin);
        }
        .eachleg:nth-child(2) {
          transform: translate3d(0, 0, 12vmin);
        }
      }
      .wheels-1,
      .wheels-2 {
        position: absolute;
        bottom: 0;
        height: 6vmin;
        width: 6vmin;
        transform: translate3d(0, 6.5vmin, 0);
        transform-style: preserve-3d;
        .wheels-face:nth-child(1) {
          position: absolute;
          height: 100%;
          width: 2vmin;
          background: #0d0d0d;
          transform: translateX(-1vmin) rotate3d(0, 1, 0, 90deg);
        }
        .wheels-face:nth-child(2) {
          position: absolute;
          right: 0;
          height: 100%;
          width: 2vmin;
          background: #0d0d0d;
          transform: translateX(1vmin) rotate3d(0, 1, 0, 90deg);
        }
        .wheels-face:nth-child(3) {
          position: absolute;
          height: 100%;
          width: 100%;
          background: #1a1a1a;
          transform: translate3d(0, 0, 1vmin);
        }
        .wheels-face:nth-child(4) {
          position: absolute;
          height: 100%;
          width: 100%;
          background: #1a1a1a;
          transform: translate3d(0, 0, -1vmin);
        }
        .wheels-face:nth-child(5) {
          position: absolute;
          height: 2vmin;
          width: 100%;
          bottom: 0;
          background: #000;
          transform: translate3d(0, 1vmin, 0) rotate3d(1, 0, 0, 90deg);
        }
      }
      .column-1,
      .column-2,
      .column-3,
      .column-4,
      .column-5,
      .column-6,
      .column-7,
      .column-8 {
        position: absolute;
        height: 19.5vmin;
        width: 1.5vmin;
        background: @column;
      }
      .column-1 {
        transform: translate3d(1vmin, -4.5vmin, 30vmin) rotate3d(0, 1, 0, 90deg);
      }
      .column-2 {
        left: 40%;
        transform: translate3d(1vmin, -4.5vmin, 30vmin) rotate3d(0, 1, 0, 90deg);
      }
      .column-3 {
        left: 40%;
        transform: translate3d(1vmin, -4.5vmin, -30vmin)
          rotate3d(0, 1, 0, 90deg);
      }
      .column-4 {
        transform: translate3d(1vmin, -4.5vmin, -30vmin)
          rotate3d(0, 1, 0, 90deg);
      }
      .column-5 {
        left: 40%;
        transform: translate3d(1vmin, -4.5vmin, -15vmin)
          rotate3d(0, 1, 0, 90deg);
      }
      .column-6 {
        left: 40%;
        transform: translate3d(1vmin, -4.5vmin, 15vmin) rotate3d(0, 1, 0, 90deg);
      }
      .column-7 {
        transform: translate3d(1vmin, -4.5vmin, -15vmin)
          rotate3d(0, 1, 0, 90deg);
      }
      .column-8 {
        transform: translate3d(1vmin, -4.5vmin, 15vmin) rotate3d(0, 1, 0, 90deg);
      }
      .body {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        .front {
          position: absolute;
          height: 15vmin;
          width: 15vmin;
          background: @front-color;
          transform: translateX(-50%) rotateY(90deg);
        }
        .top {
          position: absolute;
          overflow: hidden;
          height: 15vmin;
          width: 55vmin;
          transform: translateY(-50%) rotateX(90deg);
          .left,
          .right {
            position: absolute;
            left: -1vmin;
            height: 50%;
            width: 101%;
          }
          .left {
            top: 0;
            background: @top-color;
            transform: translateY(1vmin) rotate(2deg);
          }
          .right {
            bottom: 0;
            background: @top-color;
            transform: translateY(-1vmin) rotate(-2deg);
          }
          .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            height: 73%;
            width: 100%;
            background: @top-color;
          }
        }
        .bottom {
          position: absolute;
          height: 15vmin;
          width: 58vmin;
          transform: translateY(50%) rotateX(90deg);
          .bottom-front {
            overflow: hidden;
            position: absolute;
            left: 0;
            height: 100%;
            width: 59%;
            .bottom-left,
            .bottom-right {
              position: absolute;
              left: -1vmin;
              height: 50%;
              width: 101%;
            }
            .bottom-left {
              top: 0;
              background: @bottom-front-color;
              transform: translateY(0.5vmin) rotate(2deg);
            }
            .bottom-right {
              bottom: 0;
              background: @bottom-front-color;
              transform: translateY(-0.5vmin) rotate(-2deg);
            }
            .bottom-center {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              height: 84%;
              width: 98%;
              background: @bottom-front-color;
            }
          }
          .bottom-tail {
            overflow: hidden;
            position: absolute;
            right: 0;
            height: 100%;
            width: 42%;
            transform-origin: left;
            transform: rotate3d(0, 1, 0, -30deg);
            .bottom-left,
            .bottom-right {
              position: absolute;
              left: -1vmin;
              height: 50%;
              width: 101%;
            }
            .bottom-left {
              top: 0;
              background: @bottom-tail-color;
              transform: translateY(1.5vmin) rotate(2deg);
            }
            .bottom-right {
              bottom: 0;
              background: @bottom-tail-color;
              transform: translateY(-1.5vmin) rotate(-2deg);
            }
            .bottom-center {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              height: 73%;
              width: 100%;
              background: @bottom-tail-color;
            }
          }
        }
        .right-border,
        .left-border {
          position: absolute;
          overflow: hidden;
          height: 100%;
          width: 100%;
          transform-origin: left;
          .body-front {
            position: absolute;
            left: 0;
            height: 100%;
            width: 55%;
            background: @slide-color;
          }
          .body-tail {
            position: absolute;
            right: 0;
            height: 100%;
            width: 55%;
            background: @slide-color;
            transform: rotate(-30deg) translateY(-4vmin) translateX(2vmin);
          }
        }
        .right-border {
          transform: translate3d(0, 0, 7.5vmin) rotate3d(0, 1, 0, 2.1deg);
        }
        .left-border {
          transform: translate3d(0, 0, -7.5vmin) rotate3d(0, 1, 0, -2.1deg);
        }
      }
      .tail {
        position: absolute;
        top: 0;
        right: 0;
        height: 3vmin;
        width: 10.5vmin;
        background: @tail-color;
        transform: translateX(5.2vmin) rotateY(90deg);
      }
    }
  }
}
@-webkit-keyframes fly {
  0% {
    transform: translate3d(-50%, -50%, -3vmin) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, -3vmin) rotate(360deg);
  }
}
@keyframes fly {
  0% {
    transform: translate3d(-50%, -50%, -3vmin) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, -3vmin) rotate(360deg);
  }
}
</style>
